<template>
  <view class="profile-already">
    <uiCard
      title="我的已学"
      mode="title"
      isFull
      thumbnail="http://www.yjzgo.com/lt-page-weixin-static/public/image/my/profile/already.png"
      @click="handleClickGotoFinishedLesson"
    >
      <view>
        <scroll-view scroll-x="true" class="already-box--scroll">
          <view class="already-box">
            <view
              class="already-lesson"
              v-for="item in list"
              :key="item.lessonId"
              :id="item.lessonId"
            >
              <view class="already-lesson--image">
                <image class="already-lesson--image-image" :src="item.lessonPic" />
              </view>
              <view class="already-lesson--name ui-txt txt-subhead ui-ellipsis">{{item.lessonName}}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uiCard>
  </view>
</template>

<script>
import uiCard from "@/components/base/card/index.vue";

export default {
  name: "profileAlready",
  components: {
    uiCard
  },
  props: {
    list: Array
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    handleClickGotoFinishedLesson(){
      uni.navigateTo({
        url : `/pages/lesson-finished/index`
      })
    }
  }
};
</script>

<style scoped lang="scss">
.profile-already {
  padding: 0 30rpx;

  .already-box--scroll {
    height: 168rpx;
    width: 600rpx;
  }
  .already-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .already-lesson {
    display: inline-block;
    width: 200rpx;
    flex: 0 0 200rpx;
    padding-right: 20rpx;
    .already-lesson--image {
      width: 180rpx;
      height: 120rpx;
      .already-lesson--image-image {
        width: 180rpx;
        height: 120rpx;
        border-radius: 20rpx;
      }
    }

    .already-lesson--name {
      margin-top: 15rpx;
      color: #2c2c35;
    }
  }
}
</style>
